<script setup lang="ts">
import { ref } from 'vue'

const imgUrl = ref(
  'https://img1.baidu.com/it/u=2360195459,3642134626&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
)

const changeImg = () => {
  imgUrl.value =
    'https://img1.baidu.com/it/u=709180229,858684869&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=987'
}

const isBlue = ref(false)
const isOrange = ref(false)

const changeBorder = () => {
  isBlue.value = !isBlue.value
  isOrange.value = !isOrange.value
}
</script>

<!-- 结构 -->
<template>
  <!-- v-bind 基本用法 v-bind:属性名  简写是  :属性名 -->
  <!-- <img @click="changeImg" v-bind:src="imgUrl" alt="" /> -->
  <img @click="changeImg" :src="imgUrl" alt="" />

  <!-- :class="{类名:是否生效的表达式}" -->
  <div class="box" :class="{ blue: isBlue, orange: isOrange }" @click="changeBorder"></div>
</template>

<!-- 样式 -->
<style scoped>
img {
  width: 200px;
  height: 200px;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px red solid;
}
.blue {
  background-color: skyblue;
}
.orange {
  border-color: orange;
  border-width: 10px;
}
</style>
